<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html_表单</title>
</head>
<body>
    <!-- 表单：主要目的是为了收集用户信息，表单主要包括三个部分，表单域、表单控件（表单元素）、提示信息 -->

    <!-- 表单域：包含表单元素的区域 -->
    <!-- 表单控件：允许用户在其中输入或者选择信息 -->
    <form action="url地址 demo.php" method="提交方式 GET\POST" name="名称">
        <input type="属性值"> <br>
        文本框，用户可以输入任何文字
        <input type="text" name="username" value="请输入用户名"> <br>
        
        密码，隐藏输入的字段
        <input type="password" name="password"> <br>
        
        单选按钮 性别：
        男<input type="radio" name="sex" value="man"> 
        女 <input type="radio" name="sex" value="woman"> <br>
        
        多选框 爱好：
        吃饭 <input type="checkbox" name="hobby">
        睡觉 <input type="checkbox" name="hobby" checked="checked">
        打豆豆 <input type="checkbox"name="hobby"> <br>
        <!-- name是表单元素的名字，如果要多选一，表单元素的name值必须一样，如性别 -->
        <!-- name和value是每个表单元素都要有的属性值，主要给后台人员使用 -->
        <!-- checked规定默认被选中 -->
        
        <!-- maxlength规定用户输入的最多字符数 -->
        <input type="text" maxlength="6"> <br>
        
        提交按钮
        <input type="submit" value="AAAAA"> <br>
        
        重制按钮
        <input type="reset" value="AAAAA"> <br>
        
        普通按钮，通常与js搭配使用
        <input type="button" value="AAAAA"> <br>
        
        文件域
        <input type="file" value="AAAAA"> <br>
        
        <!-- label标签为input元素的定义注释标签 -->
        <!-- label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将光标转到对应的表单元素上，以便与增加用户体验 -->
        <!-- label中的for属性必须与对应input中的id属性值相同 -->
        <label for="sex">男</label>
        <input type="radio" name="sex" id="sex">
        <br>
        
        <!-- 下拉表单元素 -->
        籍贯
        <select name="" id="">
            <option value="河北">河北</option> 
            <option value="河南" selected="selected">河南</option>
            <!-- selected默认选项 -->
            <option value="广东">广东</option>
            <option value="广西">广西</option>
        </select>
        <br>

        <!-- 文本域表单元素 -->
        <!-- cols 每一行的字符数 rows 最多显示多少行 -->
        <textarea name="" id="" cols="30" rows="5">AAAAA</textarea>
    </form>
</body>
</html>